import React, { useState } from 'react'
import { message, Modal, Select } from 'antd'
import { batchUpdateStatus } from '../../../request/order'
import { connect } from 'react-redux'

function SetOrderStatus(props) {
  const { visible, close, order, orderStatusMap } = props
  const [status, setStatus] = useState(0)

  const onSubmit = async() => {
    if (!status) {
      message.error('请选择订单状态')
      return false
    }
    const res = await batchUpdateStatus({ order_no: order, status })
    if (res.code) {
      message.error('订单状态更新失败')
      return false
    }
    message.success('设置成功')
    close()
  }

  return (
    <div className="set-order-status">
      <Modal
        visible={visible}
        onCancel={close}
        onOk={onSubmit}
        okText="确定"
        cancelText="取消"
        maskClosable={false}
        title="设置订单状态"
        width="400px"
        closable={false}
      >
        <Select style={{ width: '100%' }} placeholder="选择订单状态" onChange={val => setStatus(val)}>
          {Object.keys(orderStatusMap).map(item => (
            <Select.Option key={item} value={Number(item)}>{orderStatusMap[item]}</Select.Option>
          ))}
        </Select>
      </Modal>
    </div>
  )
}

export default connect(state => ({
  orderStatusMap: state.getIn(['order', 'orderStatusMap'])
}), null)(SetOrderStatus)
